<template>
    <div>
        <h1>当前的求和为:{{ sum }}</h1>
        <h1>当前的值放大10倍{{ bigSum }}</h1>
        <h1>我在{{ school }} 学习{{ subject }}</h1>
        <h1>总的人数{{ personList.length }}</h1>
        <select v-model="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">当前求和为奇数再加</button>
        <button @click="incrementWait(n)">等一等再加</button>
    </div>
</template>

<script>
import {mapGetters, mapState, mapMutations, mapActions} from "vuex";

export default {
    name: "CountNumber",
    props: ['title'],
    data() {
        return {
            n: 1,
        }
    },
    methods: {
        // increment() {
        //     // this.sum += this.n
        //     this.$store.commit("ADD", this.n)
        // },
        // decrement() {
        //     //this.sum -= this.n
        //     this.$store.commit("CUTE", this.n)
        // },
        // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations
        ...mapMutations('countOptions', {increment: 'ADD', decrement: 'CUTE'}),

        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
        // ...mapMutations(['JIA','JIAN']),

        // incrementOdd() {
        //     // if (this.sum % 2 === 1) {
        //     //     this.sum += this.n
        //     // }
        //     this.$store.dispatch("addOdd", this.n)
        // },
        // incrementWait() {
        //     setTimeout(() => {
        //         // this.sum += this.n
        //         this.$store.dispatch("addWait", this.n)
        //     }, 500)
        // },
        ...mapActions('countOptions', {'incrementOdd': 'addOdd', 'incrementWait': 'addWait'}),
        // ...mapMutations(['addOdd','addWait']),
    },
    computed: {
        // 靠程序员自己亲自去写计算属性
        // he() {
        //     return this.$store.state.sum
        // },
        // xuexiao() {
        //     return this.$store.state.school
        // },
        // xueke() {
        //     return this.$store.state.subject
        // },
        // 借助mapState生成计算属性,从state中读取数据。(对象写法)
        // ...mapState({'he': 'sum', 'xuexiao': 'school', xuke: 'subject'}),
        // 借助mapState生成计算属性,从state中读取数据。（数组写法)
        ...mapState('countOptions', ['sum', 'school', 'subject', 'personList']),
        ...mapState('personOptions', ['personList']),

        // bigsum() {
        //     return this.$store.getters.bigSum
        // }

        //借助mapGetters生成计算属性，从getters中读取数据。(对象写法)1/
        // ...mapGetters({bigSum : 'bigsum'},
        //借助mapGetters生成计算属性，从getters中读取数据。（数组写法)
        ...mapGetters('countOptions', ['bigSum']),
    },
    mounted() {
    }
}
</script>

<style scoped>
button {
    margin-left: 5px;
}
</style>